<!--
基础布局组件
@author: pan
@createDate: 2021-12-22 21:16
-->
<script>
export default {
  name: 'BasicLayout',
  data() {
    return {}
  },
  method: {},
}
</script>

<template>
  <div class="l-container">
    <div class="l-container-left"></div>
    <div class="l-container-right">
      <div class="l-container-header">
        <router-link :to="{ name: 'first' }">页面A</router-link>
        &nbsp;
        <router-link :to="{ name: 'second' }">页面B</router-link>
      </div>
      <div class="l-container-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.l-container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-basis: auto;
  box-sizing: border-box;
  background-color: pink;
  height: 100%;
  &-left {
    width: 224px;
    background-color: green;
  }
  &-right {
    width: calc(100% - 224px);
    background-color: gray;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  &-header {
    height: 64px;
    background-color: lightblue;
    width: 100%;
    flex-shrink: 0;
  }
  &-body {
    flex: 1;
    height: 0;
    overflow: auto;
    background-color: lightseagreen;
    padding: 24px;
    box-sizing: border-box;
  }
}
</style>
